<#import "/spring.ftl" as spring />

<#include "/tags/userNotification.ftl">
<#include "/tags/famousQuote.ftl">
<#include "/tags/userCompleteness.ftl">
<#include "/tags/userIntroTag.ftl">
<#include "/tags/friendList.ftl">
<#include "/tags/friendHintTag.ftl">
<#include "/tags/goalCloudTag.ftl">
<#include "/tags/updatedSinceTag.ftl">
<#include "/tags/topGoalsTag.ftl">
<#include "/tags/commonGoalsTag.ftl">
<#include "/tags/confirmBox.ftl">
<#include "/tags/activitiesTag.ftl">
<#include "/tags/shouldDoGoalTag.ftl">
<#include "/tags/mustDoGoalWidget.ftl">
<head>	     	
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/style_dev.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/igoal-calendar/jquery-ui-1.8.6.igoal-calendar.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/tools/jquery.autocomplete.css">
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/styles/jquery.alertbox.css">
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.mouse.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.position.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.widget.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.ui.calendar.min.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.autocomplete.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.easing.1.3.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.alertbox.js"></script>
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/cleditor/jquery.cleditor.min.js"></script>
	<link rel="stylesheet" type="text/css" href="${rc.contextPath}/scripts/cleditor/jquery.cleditor.css">
	     
	<script type="text/javascript" src="${rc.contextPath}/scripts/jquery.custom.select.js"></script>
	
	<script type="text/javascript" src="${rc.contextPath}/scripts/page.userDashboard.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/page.manageSMARTGoal.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/scripts/common.goalUtils.js"></script>	
	<script type="text/javascript" src="${rc.contextPath}/scripts/widget.js"></script>
	<script type="text/javascript" src="${rc.contextPath}/dwr/interface/GoalEntryManager.js"></script>	

	<title>Manage S.M.A.R.T Goal</title>
</head>

<div style="display:none;">
	<div id="sliderPopup" class="userSlider">
		<h1>Bạn đã hoàn thành được bao nhiêu % mục tiêu này?</h1>
		<p>Việc cập nhật số % hoàn thành của một mục tiêu giúp bạn kiểm soát được quá trình thực hiện mục tiêu của mình, hãy cập nhật nó ít nhất 1 tuần 1 lần.</p>
		<div class="slider">
			<div id="slider" rel="#sliderValue a"></div>
			<div id="sliderValue">
				<a>0%</a>
			</div>
			<div class="w4"></div>
			<div id="closeSlider">
				<a href="#" class="icon_1 btnUploadAvatar" style="margin-left:200px">Cập nhật</a>
			</div>
		</div>
	</div>
</div>

<@userNotification />  
<div class="w3"></div>

<div id="infomation">           
    <#if data.mustDoGoal??>
    	<@mustDoGoalWidget data.mustDoGoal.id data.mustDoGoal.title data.mustDoGoal.userCount/>
    </#if>
	<div id="left">
		<div class="dashboardTab">
        	<ul>
            	<li>
                	<a href="${rc.contextPath}/dashboard.html" title="Chia sẻ mục tiêu của bạn!" class="d2Goal selected">MỤC TIÊU</a>
                </li>
                <li>
                	<a href="${rc.contextPath}/wall.html" title="Kết nối bạn bè!" class="d2Wall">TƯỜNG NHÀ</a>
                </li>
                <li>
                	<a href="${rc.contextPath}/news" title="Những bài viết hay!" class="d2News">CHIA SẺ</a>
                </li>
            </ul>
        </div>
        <div class="clearthis"></div>
        <div class="dashboardBlueBox">
        	<div class="dbTitle">
            	<b><@spring.message "page.dashboard.whatIsYourGoal" /></b><label>VUI LÒNG SỬ DỤNG TIẾNG VIỆT CÓ DẤU.</label>
            </div>
            <form name="data" action="${rc.contextPath}/addNewSMARTGoal.html" method="POST">
            <div class="dbAddGoal">
            	<span class="addGoalForm bgPos">
            		<@spring.formInput path="data.newGoalTitle" attributes="autocomplete='off' class='ac_input ignore_me' rel='${data.settings.allowAddGoal?string(\'allow\',\'deny\')}' maxlength='255'"/>
            	</span>
                <a id="add_goal" class="ignore_me" title="Thêm mục tiêu vào danh sách." href="#"></a>
            </div>
            </form>
            <p class="goalExample">Ví dụ: <a href="#">học guitar</a>, <a href="#">học giỏi tiếng anh</a>, <a href="#">du học</a>...</p>
        </div>
      	<div class="clear"></div>      	
      	<div class="contentHeader">
        	<span class="icon_1 iconYSD"></span><h1>CẬP NHẬT MỤC TIÊU <a href="#" class="textGoalName">"${data.goalTitle}"</a></h1>
            <span class="fr previousLink"><a href="${rc.contextPath}/dashboard.html">&laquo; Quay lại</a></span>
         </div>   
        <div class="goalManagementContainer">
        	<div class="goalMagPercentBox">
            	<label>MỨC ĐỘ HOÀN THÀNH</label>
                <b id="completedPercent">${data.goalCompletePercent}%</b>
            </div>
            <div class="goalInfoMag">
            	<h1>Bạn còn <b>${data.userGoal.remainingDate} ngày</b> để hoàn thành mục tiêu này.</h1>
                <h2>Cập nhật mục tiêu!</h2>
                <p>Bạn đang thực hiện mục tiêu <a href="${rc.contextPath}/goal/${data.userGoal.goalId}" class="textGoalName">“${data.goalTitle}”</a>. Hãy cập nhật tiến độ cho mục tiêu của bạn bằng cách cập nhật trạng thái các công việc bạn đã lập kế hoạch trước đó.</p>
            </div>
            
            <div class="clearthis"></div>
            
            <ul class="goalMagTool">
            	<li><a href="#" class="entryComment"></a><a href="${rc.contextPath}/entry/add/${data.userGoal.goalId}">VIẾT BÀI CHO MỤC TIÊU NÀY</a></li>
                <li style="padding-left:60px"><a href="#" class="entryEdit"></a><a href="${rc.contextPath}/addSMARTGoal.html?goalId=${data.userGoal.goalId}">CHỈNH SỬA CÔNG VIỆC THỰC HIỆN</a></li>
                <li style="float:right;padding-right:5px;"><a href="#" class="entryDelete"></a><a href="#">XÓA MỤC TIÊU</a></li>
            </ul>
            <#if data.userGoal.value??>
			<label class="inputLabelGrey">Kết quả mong muốn đạt được: <b style="color:#f60">${data.userGoal.value}</b></label>
			</#if>
            <label class="inputLabelGrey">Các công việc phải thực hiện để hoàn thành mục tiêu này.</label>
            <p style="font-size:11px;color:#666;">Nhấn vào mục công việc để xác nhận hoàn thành. Để chỉnh sửa danh sách công việc <a href="${rc.contextPath}/addSMARTGoal.html?goalId=${data.userGoal.goalId}"" class="textGoalName"><b>nhấn đây</b></a></p>
          	<form action="${rc.contextPath}/manageSMARTGoal.html" method="POST" name="updateTasks">
          	<@spring.formHiddenInput path="data.userGoal.goalId"/>
          	<ul class="ulTaskDoing"> 
          		<#list data.phases as phase>
          			<#assign taskClass=""/>
          			<#switch phase.deadLineStatus>
          				<#case 0>
          					<#assign taskClass="taskProcess"/>
          					<#break>
          				<#case 1>
          					<#assign taskClass="taskComingUp"/>
          					<#break>
          				<#case 2>
          					<#assign taskClass="taskDelay"/>
          					<#break>
          				<#default>
          					<#assign taskClass="taskProcess taskDone added"/>
          			</#switch>
          			<#list phase.tasks as task>          				
	          			<li class="listTaskDoing ${taskClass}" rel="${task.id}">
		                    <label class="fl">0${phase.index}</label>
		                    <a class="taskName bgPos fl"> ${task.taskName}</a>
		                    <a  class="taskPercent bgPos fl" >${task.percentMeasure}%</a>
		                    <a class="taskDeadline bgPos fl" >${task.deadLine}</a>	       
		                    <#if taskClass == "taskProcess taskDone added">
		                    	<a class="iconTaskDone fl" href="#"></a>
		                    </#if>             
		                    <@spring.formHiddenInput path="data.phase${phase.index}.finished" attributes="class='finished'"/>
		                    <@spring.formHiddenInput path="data.phase${phase.index}.phaseName"/>
		                    <@spring.formHiddenInput path="data.phase${phase.index}.percentMeasure"/>
		                    <@spring.formHiddenInput path="data.phase${phase.index}.deadLine"/>
		                    <@spring.formHiddenInput path="data.phase${phase.index}.index"/>
		                    <@spring.formHiddenInput path="data.phase${phase.index}.id"/>
		                </li>
          			</#list>          			
          		</#list>
            </ul>
            <p><a href="javascript:submitForm();" class="btnSubmitTask">Cập nhật</a></p>
            </form>
        </div>
    </div>
    
    <div id="right">
		<@userCompleteness />		
		<@topGoals />
		<@userIntro />
        <@friendList username="${data.userInSession}" />
        <@friendHint />
	</div>
</div>
